GEvent Class สำหรับจัดการ Event ของ DOM ระดับ 2 ซึ่งมีคำสั่งและการจัดการที่ไม่เหมือนกัน ระหว่าง Browser มาตรฐาน และ IE เพื่อให้การทำงานกับ Event ด้วย GAjax ง่ายและเป็นระเบียบมากขึ้น

• isLeftClick
• isMiddleClick
• isRightClick
• element
• keyCode
• stop

isLeftClick,isMiddleClick,isRightClick ฟังก์ชั่นสำหรับตรวจจับการกดเมาส์ที่ปุ่มต่างๆ

<p>คลิกซ้าย : <input type="checkbox" id="leftclick" /></p>
<p>คลิกกลาง : <input type="checkbox" id="middleclick" /></p>
<p>คลิกขวา : <input type="checkbox" id="rightclick" /></p>

<script type="text/javascript">
$G(window).addEvent('load', function() { // ทำงานตอน load (onload)
  $G(document).addEvent('mousedown', doMouseDown); // ดัก event mousedown
});

var doMouseDown = function(event) {
     $E('leftclick').checked = GEvent.isLeftClick(event);
     $E('middleclick').checked = GEvent.isMiddleClick(event);
     $E('rightclick').checked = GEvent.isRightClick(event);
};
</script>

element ฟังก์ชั่นสำหรับอ่าน Element ที่เป็นผู้สร้างอีเว้นต์ขึ้นมา
keyCode ฟังก์ชั่นอ่านค่า Key Code ที่ได้จากการกด keyboard
stop ฟังก์ชั่นสำหรับหยุดการเผยแพร่อีเว้นต์

<p>DOM ระดับ 0 : <input type="text" onkeypress="return numberOnly1(event)" id="DOM_0" /></p>
<script type="text/javascript">
// ฟังก์ชั่นรับการกดคีย์ เป็นตัวเลขเท่านั้น
function numberOnly1( e ) {
  // อ่านค่าคีย์
  if( window.event ) {
    key = e.keyCode; // IE
  } else if( e.which ) {
    key = e.which; // Netscape/Firefox/Opera
   };
   return ( ( key > 47 && key < 58 ) || key == 8 );
};
</script>

ด้านบนเป็นโค้ดปกติสำหรับการใช้งาน DOM ระดับ 0 ซึ่งต้องเขียนคำสั่ง Javascript ลงในโค้ด HTML โดยตรง ซึ่งถ้ามีการใช้งานฟังก์ชั่นนี้เป็นจำนวนมากๆ โค้ดอาจดูไม่เป็นระเบียบ และสับสนได้

<p>DOM ระดับ 2 : <input type="text" id="DOM_2" /></p>

<script type="text/javascript">
// ฟังก์ชั่นรับการกดคีย์ เป็นตัวเลขเท่านั้น
var numberOnly2 = function( event ) {
  var key = GEvent.keyCode(event); // อ่านค่า keycode
  if ( !(  ( key > 48 && key < 68 ) || ( key > 95 && key < 106 ) || key == 8 || key == 9 || key == 37 || key == 39 ) ) {
    GEvent.stop(event); // ยกเลิก event
    return false; // คืนค่า false
  };
};

var doFocus = function( event ) {
  $E('element').innerHTML = GEvent.element(event ).id;
};

$G("DOM_2").addEvent("keydown", numberOnly2);
$G("DOM_2").addEvent("focus", doFocus);
$G("DOM_0").addEvent("focus", doFocus);
</script>

โค้ดในส่วนนี้เราใช้ GAJAX ในการจัดการ จะเห็นได้ว่า ที่ในส่วนของ input ไม่ได้มีการอ้างถึง event หรือ Javascript เลย แต่เราจะใช้ GAJAX ในการจัดการแทน ซึ่งหากเราแยกส่วน Javascript เป็นไฟล์ภายนอกแล้วละก็ โค้ด HTML ของเราจะมีแต่ HTML ล้วนๆเลยทีเดียว

ในโค้ด มีการใช้งาน Event onfocus เพื่อใช้ตรวจสอบว่า Element ใดได้รับโฟกัสด้วย เพื่อเอาไว้อ่าน id ของ Element เจ้าของ Event ที่ได้รับโฟกัส
สำหรับ Window.onload ผมแนะนำให้ใช้ GElement.Ready แทนครับ

$G(window).Ready(function(){
  // การทำงานเมื่อโหลดเพจเสร็จเรียบร้อย

  alert('Loaded');
});